<script setup>
import { ref } from 'vue'
import SonCom from './components/SonCom.vue'

const msg = ref('我是来自父组件的数据')

const onMsgChange = (event)=>{
  msg.value = event
}
</script>

<template>
  <!-- 结构 -->
  <div class="box">
    <h1>父组件</h1>
    <p>{{ msg }}</p>
    <button @click="msg += '!'">修改数据</button>
    <!-- 3. 监听消息(事件) -->
    <SonCom :msg="msg" @update:msg="msg = $event" />
    <SonCom :msg="msg" @update:msg="onMsgChange" />

    <!-- Vue2 属性双向绑定 写法 -->
    <!-- <SonCom :msg.sync="msg" /> -->

    <!-- Vue3 属性双向绑定 写法，v-model:msg 等价于 :msg="msg" + @update:msg="msg = $event" -->
    <SonCom v-model:msg="msg" />
  </div>
</template>

<style scoped>
  .box{
    padding: 20px;
    border: 5px solid #000;
  }
</style>
